<template xmlns:v-on="http://www.w3.org/1999/xhtml">
    <div id="app" class="home">
        <div class="homeLeft">
            <div class="homelogo"><img src="/static/img/logo.png" alt="">
            </div>
            <div class="personageView">
                <div>
                    <div>
                        <img src="/static/img/raw_1482510356.jpeg" alt="">
                    </div>
                </div>
                <div>
                    <div>{{userState}}</div>
                    <!--<div @click="backHome">[退出]</div>-->
                </div>
            </div>
            <div class="sideNav">
                <ul>
                    <li v-for="(list,index) in lists" :class="{sadeNacLi:isSadeNacLi,sadeNacClo:isSadeNacClo == index}">
                        <div class="sadeNaOne" @click="sadeNavClick(index)">
                            <div><span :class="list.img"></span></div>
                            <div>{{list.name}}</div>
                            <div :class="{rotatearrows:isRotatearrows == index}"><span class="glyphicon glyphicon-chevron-right"></span></div>
                        </div>
                        <transition name="slide-column">
                            <div v-show="sadeLiTwo == index" class="sadeNaTwo">
                                <ul>
                                    <li v-for="(sub,ind) in list.subs" @click="sadeNaTwoClick(ind)" :class="{sadeLiTwoCl:isSadeLiTwo == ind}">
                                        <div><span :class="sub.img"></span></div>
                                        <div>{{sub.name}}</div>
                                    </li>
                                </ul>
                            </div>
                        </transition>
                    </li>
                </ul>
            </div>
        </div>
        <div class="homeRight">
            <div class="topNav">
                <div class="topNavL"></div>
                <div class="topNavR" @click="backHomeClick">
                </div>
            </div>
            <div class="homeMain">
                <transition name="slide-View">
                    <router-view @upup="change" keep-alive></router-view>
                </transition>
            </div>
        </div>
    </div>
</template>
<script>
    import { mapActions, mapState } from 'vuex'
    export default {
        name: 'home',
        data() {
            return {
                pathsStst: '',
                isRotatearrows: 0,
                userState: '管理员',
                isNavPopup: false,
                lists: [{
                    name: '权限管理',
                    img: 'glyphicon glyphicon-user',
                    push: 'management',
                    subs: [
                        { name: '账号管理', img: 'glyphicon glyphicon-th-list', push: 'account' },
                        { name: '角色管理', img: 'glyphicon glyphicon-user', push: 'role' },
                        { name: '资源管理', img: 'glyphicon glyphicon-globe', push: 'resource' }
                    ]
                }, {
                    name: '任务调度',
                    img: 'glyphicon glyphicon-list-alt',
                    push: 'job',
                    subs: [
                        { name: '新增任务', img: 'glyphicon glyphicon-alert', push: 'addJob' },
                        { name: '等待任务', img: 'glyphicon glyphicon-step-forward', push: 'awaitJob' },
                        { name: 'Cron任务', img: 'glyphicon glyphicon-move', push: 'cronJob' },
                        { name: '执行中任务', img: 'glyphicon glyphicon-play', push: 'executiveJob' },
                        { name: '异常任务', img: 'glyphicon glyphicon-alert', push: 'unusualJob' },
                        { name: '任务列表', img: 'glyphicon glyphicon-list-alt', push: 'listJob' }
                    ]
                }, {
                    name: '事件中心',
                    img: 'glyphicon glyphicon-th',
                    push: 'incidentCenter',
                    subs: [
                    ]
                }, {
                    name: '流',
                    img: 'glyphicon glyphicon-align-center',
                    push: 'eventForw',
                    subs: [
                    ]
                }, {
                    name: '日志信息',
                    img: 'glyphicon glyphicon-list-alt',
                    push: 'log',
                    subs: [
                    ]
                }],
                isSadeNacLi: true,
                isSadeNacClo: 0,
                sadeLiTwo: 0,
                isSadeLiTwo: 0,
                sadeTrue: true
            }
        },
        computed: mapState(['tempName']),
        created: function () {
            var name = sessionStorage.getItem('userName')
            if (name) {
                this.userState = name
            } else {
                this.userState = "管理员"
            }
            var psthStr = this.$route.path.split('/')[2]
            var psthTherrStr = this.$route.path.split('/')[3]
            switch (psthStr) {
                case 'incidentCenter':
                    this.isSadeNacClo = 2
                    this.sadeLiTwo = 2
                    this.isRotatearrows = 2
                    break;
                case 'job':
                    this.isSadeNacClo = 1
                    this.sadeLiTwo = 1
                    this.isRotatearrows = 1
                    break;
                case 'management':
                    this.isSadeNacClo = 0
                    this.sadeLiTwo = 0
                    this.isRotatearrows = 0
                    break;
                case 'eventForw':
                    this.isSadeNacClo = 3
                    this.sadeLiTwo = 3
                    this.isRotatearrows = 3
                    break;
                case 'log':
                    this.isSadeNacClo = 4
                    this.sadeLiTwo = 4
                    this.isRotatearrows = 4
                    break;
                default:
                    break;
            }
            var self = this
            this.lists[this.isSadeNacClo].subs.forEach(function (ele, ind) {
                if (psthTherrStr == ele.push) {
                    self.isSadeLiTwo = ind
                    self.tempName.name = ind
                }
            })
        },
        methods: {
            change(msg) {
                this.pathsStst = msg
                this.$emit('upupup', msg);
            },
            // 侧栏导航切换
            sadeNavClick(index) {
                this.isRotatearrows = index
                this.isSadeNacClo = index
                this.sadeLiTwo = index
                var pathStr = this.lists[index].push
                if (this.lists[index].subs.length > 0) {
                    this.tempName.name = 0
                }
                var url = '/home/' + pathStr
                this.$router.push({
                    path: url
                })
                this.isSadeLiTwo = 0
            },
            // 侧栏二级跳转
            sadeNaTwoClick(index) {
                this.isSadeLiTwo = index
                var count = this.isSadeNacClo
                var tsubs = this.lists[count].subs
                var pathStrt = tsubs[index].push
                var pathStro = this.lists[count].push
                this.tempName.name = index
                var url = '/home/' + pathStro + '/' + pathStrt
                this.$router.push({
                    path: url
                })
            },
            // 管理操作
            backHomeClick() {
                this.isNavPopup = !this.isNavPopup;
            },
            // 退出界面
            backHome() {
                sessionStorage.removeItem('userId')
                sessionStorage.removeItem('userName')
                this.$router.push({
                    path: '/login'
                })
            }
        }
    }

</script>

</script>
<style scoped>
    .home {
        width: 100%;
        display: flex;
        overflow: hidden;
    }
    
    .homeLeft {
        width: 220px;
        height: 100vh;
        background-color: #1f345c;
    }
    
    .homeRight {
        width: calc(100% - 220px);
        background-color: #f3f3f3;
    }
    
    .homelogo {
        height: 56px;
        width: 100%;
        background-color: #3c8dbc;
    }
    
    .homelogo img {
        width: 100%;
        height: 100%;
    }
    
    .personageView {
        width: 100%;
        height: 96px;
        display: flex;
        border-bottom: 1px solid #35486c;
        flex-wrap: wrap;
        background-color: #1f345c;
    }
    
    .personageView>div:nth-child(1) {
        width: 100%;
        height: 47px;
        display: flex;
        justify-content: center;
        position: relative;
    }
    
    .personageView>div:nth-child(1)>div {
        position: absolute;
        top: -15px;
        left: calc((220px - 70px) / 2);
        width: 70px;
        height: 70px;
        overflow: hidden;
        border-radius: 50%;
        border: 1px solid #fdfdfd;
    }
    
    .personageView>div:nth-child(1)>div>img {
        width: 100%;
        height: 100%;
    }
    
    .personageView>div:nth-child(2) {
        margin-top: 15px;
        width: 100%;
        height: 25px;
        display: flex;
        justify-content: center;
        color: #4993d6;
    }
    
    .personageView>div:nth-child(2)>div {
        margin-right: 3px;
        margin-left: 3px;
    }
    
    .statePon div {
        margin-left: 5px;
    }
    
    .statePon div:nth-child(1) {
        width: 8px;
        height: 8px;
        border: 1px solid green;
        background-color: green;
        border-radius: 50%;
    }
    
    .statePon div:nth-child(3) {
        cursor: pointer;
    }
    
    .topNav {
        height: 56px;
        background-color: #fff;
        display: flex;
        justify-content: space-between;
        width: 100%;
    }
    
    .topNavR {
        height: 55px;
        line-height: 55px;
        display: flex;
        align-items: center;
        overflow: hidden;
    }
    
    .emailHint {
        width: 65px;
        height: 55px;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }
    
    .logQuit {
        background-color: #3c8dbc;
        min-width: 150px;
        height: 55px;
        display: flex;
        cursor: pointer;
    }
    
    .logQuit>div:nth-child(1) {
        margin-left: 10px;
        display: flex;
        align-items: center;
    }
    
    .logQuit>div:nth-child(1) img {
        width: 37px;
        height: 37px;
        border-radius: 50%;
    }
    
    .logQuit>div:nth-child(2) {
        margin-left: 15px;
    }
    
    .logQuit>div:nth-child(3) {
        margin-left: 8px;
    }
    
    .backHoeme {
        cursor: pointer;
        height: 55px;
        width: 50px;
        text-align: center;
        margin-left: 20px;
        color: #ff4949;
    }
    
    .homeMain {
        overflow: hidden;
        height: 100%;
        border-left: 1px solid #ededed;
        background-color: #f2f6f7;
    }
    
    .sadeNacLi {
        min-height: 45px;
        height: 100%;
        width: 100%;
        border-bottom: 1px solid #35486c;
        font-family: "Microsoft YaHei", "微软雅黑";
    }
    
    .sadeNacLi .sadeNaOne {
        height: 45px;
        width: 100%;
        display: flex;
        line-height: 45px;
        cursor: pointer;
        font-family: "Microsoft YaHei", "微软雅黑";
        z-index: 10;
    }
    
    .sadeNacLi .sadeNaTwo {
        width: 100%;
        display: flex;
        cursor: pointer;
    }
    
    .sadeNacLi .sadeNaTwo>ul {
        width: 100%;
    }
    
    .sadeNacLi .sadeNaTwo>ul>li {
        border-left: 8px solid #19555a;
        height: 45px;
        width: 100%;
        display: flex;
        line-height: 45px;
        cursor: pointer;
        background-color: #14223c;
        border-bottom: 1px solid #35486c;
    }
    
    .sadeNacLi .sadeNaTwo>ul>li>div:nth-child(1) {
        width: 65px;
        height: 45px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    
    .sadeNacLi .sadeNaTwo>ul>li>div:nth-child(1) span {
        color: #4993d6;
    }
    
    .sadeNacLi .sadeNaTwo>ul>li>div:nth-child(2) {
        width: 100px;
        text-align: center;
        font-size: 16px;
        color: #4993d6;
    }
    
    .sadeNacLi .sadeNaOne>div:nth-child(1) {
        width: 65px;
        height: 45px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }
    
    .sadeNacLi .sadeNaOne>div:nth-child(1) span {
        color: #4993d6;
    }
    
    .sadeNacLi .sadeNaOne>div:nth-child(2) {
        width: 100px;
        text-align: center;
        font-size: 16px;
        color: #4993d6;
    }
    
    .sadeNacLi .sadeNaOne>div:nth-child(3) {
        width: 100px;
        text-align: center;
        font-size: 16px;
        color: #4993d6;
    }
    
    .rotatearrows span {
        transform: rotate(90deg);
        -ms-transform: rotate(90deg);
        -moz-transform: rotate(90deg);
        -webkit-transform: rotate(90deg);
        -o-transform: rotate(90deg);
    }
    
    .sadeNacClo .sadeNaOne {
        background-color: #0d1624;
    }
    
    .sadeNacClo .sadeNaTwo {
        background-color: #fff;
    }
    
    .sadeNacClo .sadeNaTwo .sadeLiTwoCl {
        border-left: 8px solid #2bc4b1;
    }
    
    .sadeNacLi .sadeNaTwo>ul>li:hover {
        border-left: 8px solid #2bc4b1;
    }
    
    .sadeNacLi .sadeNaOne:hover {
        background-color: #0d1624;
    }
    
    .navPopup {
        position: fixed;
        top: 55px;
        right: 0;
        width: 148px;
        height: 120px;
        background-color: #fff;
        z-index: 1;
        border-left: 1px solid #99afbf;
        border-right: 1px solid #99afbf;
        border-bottom: 1px solid #99afbf;
        border-bottom-left-radius: 2px;
        border-bottom-right-radius: 2px;
    }
    
    .navPopup>ul>li {
        width: 100%;
        height: 40px;
        line-height: 40px;
        border-bottom: 1px solid #99afbf;
        text-align: center;
        font-size: 15px;
        cursor: pointer;
    }
    
    .navPopup>ul>li:nth-child(3) {
        border: 0;
    }
    
    .slide-fade-enter-active {
        transition: all 0.7s ease;
    }
    
    .slide-fade-enter,
    .slide-fade-leave-active {
        transform: translateX(30px);
        opacity: 0;
    }
    
    .slide-View-enter-active {
        transition: all 0.7s ease;
    }
    
    .slide-View-enter,
    .slide-View-leave-active {
        /*transform: translateX(-30px);*/
        opacity: 0;
        transform: rotate( -70deg) translateX( 300px);
    }
    
    .slide-column-enter-active {
        transition: all 0.7s ease;
    }
    
    .slide-column-enter,
    .slide-column-leave-active {
        transform: translateY(30px);
        opacity: 0;
    }
</style>